import DOMPurify from 'dompurify';

const sanitizeDirective = {
    bind(el) {
        // 定义一个处理函数来避免无限递归
        const handleInput = function (event) {
            const input = event.target;
            // 先移除事件监听器
            input.removeEventListener('input', handleInput);
            let value = input.value;
            // 使用 DOMPurify 进行过滤
            value = DOMPurify.sanitize(value);
            input.value = value;
            // 手动触发 input 事件以更新 v-model
            input.dispatchEvent(new Event('input'));
            // 重新添加事件监听器
            input.addEventListener('input', handleInput);
        };

        // 监听元素的事件
        if (el.value) {
            // input标签
            el.addEventListener('input', handleInput);
            el._handleInput = handleInput; // 保存引用以供unbind使用
        } else {
            // el-input标签
            const input = el.querySelector('input');
            if (input) {
                input.addEventListener('input', handleInput);
                el._handleInput = handleInput; // 保存引用以供unbind使用
            }
        }
    },
    unbind(el) {
        // 清理事件监听器
        if (el.value) {
            el.removeEventListener('input', el._handleInput);
        } else {
            const input = el.querySelector('input');
            if (input) {
                input.removeEventListener('input', el._handleInput);
            }
        }
    },
};

export default sanitizeDirective;
